<template>
  <view
    class="top"
    ref="top"
    :style="{
      height: navHeight + 'rpx',
    }"
  >
    <view
      class="titleText"
      :style="{
        height: menuButtonheight + 'rpx',
        top: navHeight + 'rpx',
        'padding-right': navPaddingRight + 'rpx',
      }"
      >消息</view
    >
  </view>
  <!-- 胶囊 -->
  <view
    class="menuButtonheight"
    :style="{ height: menuButtonheight + 'rpx', top: navHeight + 'rpx' }"
  >
  </view>

  <view
    class="list"
    :style="{
      'padding-top': navHeight + menuButtonheight + 'rpx',
    }"
  >
  <view
        class="nullData _width"
        style="background-color: #fff"
      >
        <image
          src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png"
          mode=""
        ></image>
        <text>暂无数据</text>
      </view>
    <!-- <view class="listRow">
      <view class="row">
        <view class="avatar">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/designerBag.png"
          ></image>
        </view>
        <view class="message">
          <view class="right">
            <view class="label">高文安-项目经理</view>
            <view class="text"
              >你好，我这有套设计方案，能帮我设计一下吗...</view
            >
          </view>
          <view class="time"> 15:03 </view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  watchEffect,
  onMounted,
  computed,
  nextTick,
} from "vue";

import { onShow, onLoad, onReady } from "@dcloudio/uni-app";
import { checkLogin } from "@/utils/auth.js";
// 头部的高度
const headHeight = ref("");
// 导航栏的右边距
const navPaddingRight = ref("");
// 导航栏的高度
const navHeight = ref("");
//胶囊高度: "value",
const menuButtonheight = ref("");

// 导航栏距离顶部的距离
const navTop = ref("");

const show = ref(false);
onShow(() => {
  // if (!checkLogin()) {
  //   return;
  // }
});
onMounted(() => {
  // 获取胶囊的位置
  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
  const systemInfo = uni.getSystemInfoSync();
  // 获取系统信息
  uni.getSystemInfo({
    success: (res) => {
      // 获取状态栏的高度
      const statusBarHeight = res.statusBarHeight;
      navTop.value = menuButtonObject.top;
      navHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
      menuButtonheight.value = menuButtonObject.height * 2;
      navPaddingRight.value = (menuButtonObject.width + 6) * 2;
      headHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
    },
  });
});

// 页面加载时接收 URL 参数
onLoad((options) => {
  // 获取 id 参数
//   id.value = options.id;
});

// 跳转到首页
const goHome = () => {
  uni.switchTab({
    url: "/pages/home/index",
  });
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  background-color: #ffff;
  // background: rgba(254, 172, 94, 0.4);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;

  .titleText {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2f2f2f;
    width: 100%;
    font-size: 24rpx;
    text-align: center;
  }
}

.menuButtonheight {
  width: 100%;
  position: absolute;
  background-color: #ffff;
}

.list {
  border-top: 1px solid #e6e6e6;
  background-color: #ffff;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  padding: 20rpx 0;
  box-sizing: border-box;

  .listRow {
    width: 100%;
    height: 130rpx;
    display: flex;
    align-items: center;

    .row {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx 0 30rpx;

        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
        }
      }

      .message {
        flex: 1;
        display: flex;
        height: 100%;
        border-bottom: 1rpx solid #e6e6e6;

        .right {
          flex: 1;
          height: 100%;
          display: flex;
          align-content: space-evenly;
          flex-wrap: wrap;
          box-sizing: border-box;

          .label {
            display: flex;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
            line-height: 30rpx;
            font-style: normal;
            text-transform: none;
            padding: 0 20rpx;
          }

          .text {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            line-height: 30rpx;
            font-style: normal;
            text-transform: none;
            padding: 0 20rpx;
          }
        }

        .time {
          padding-right: 30px;
          margin-top: 20rpx;
          width: 200rpx;
          text-align: right;

          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 30rpx;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}
</style>
